<!DOCTYPE html>
<html>

<head>
    <title>用户中心</title>
    <meta name="keywords" content="123456" />
    <meta name="description" content="用户中心">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="author" content="大麦云信息">
    <meta charset="utf-8">

    <!-- <link rel="stylesheet" type="text/css" href="./assets/css/bootstrap.min.css" /> -->
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
    <style>
        #contain {
            margin-bottom: 60px;
        }

        .navbar-fixed-bottom {
            box-shadow: 0px -5px 5px rgba(0, 0, 0, .2);
            height: 60px;
        }

        #contain-head {
            /* height: 12rem; */
            /* background-color: linear-gradient(#F08080, #FFB6C1);; */
            /* background: linear-gradient(#fb6969, #fe989f); */
            /* 标准的语法 */
            background-image: url(__HOME__/images/team/xiaoguo.png);
            background-repeat: no-repeat;
            background-size: cover;
        }



        .my-row {
            padding: 5rem 0 0 0;
            display: flex;
        }

        .my-cell.u-1of4 {
            flex: 0 0 25%;
        }

        .my-cell.u-1of2 {
            flex: 0 0 50%;
        }

        #contain-body {
            background-color: #f7f7f7;
            padding: 14px 8px;
        }

        #body-items {}

        .body-item {
            background-color: white;
            margin: 0 0 10px 0;
            border-radius: 10px;
            box-shadow: 0px 0px 3px 1px rgba(0,0,0,.1);
        }

        .icon-text-1 {
            margin: 5px 0 0 0;
            font-size: 12px;
        }


        #head-icons {
            display: flex;
        }

        #nine-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .nine-grid-cell {
            padding: 1rem 0 0 0;
            border: 1px solid #F0F0F0;
        }

        .nine-grid-cell.u1 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 1px 1px 0;
        }

        .nine-grid-cell.u2 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 0 1px 0;
        }

        .nine-grid-cell.u3 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 1px 0 0;
        }

        .nine-grid-cell.u4 {
            padding: 1rem 0 0 0;
            border-style: dotted;
            border-color: #F0F0F0;
            border-width: 0 0 0 0;
        }

        .nine-grid-cell.u-empty {
            background-color: #f7f7f7;
        }

        .my-cell.u-1of3 {
            flex: 0 0 33%;
        }

        .my-cell.u-1of5 {
            flex: 0 0 20%;
        }

        .my-cell.u-2of5 {
            flex: 0 0 40%;
        }

        .my-cell.u-3of5 {
            flex: 0 0 60%;
        }

        .my-cell.u-3of10 {
            flex: 0 0 30%;
        }

        .my-cell.u-4of10 {
            flex: 0 0 40%;
        }

        .my-cell.u-35of100 {
            flex: 0 0 35%;
        }


        .my-cell.u-45of100 {
            flex: 0 0 45%;
        }

        #my-footer {
            display: flex;
        }

        .my-icon {
            padding: 1rem;
            text-align: center;
        }

        .my-icon-2 {
            /* width: 35%; */
            width: 32px;
            height: 32px;
        }

        .my-icon-3 {
            margin: 10px 0 4px 0;
            width: 20px;
        }

        .my-icon-4 {
            /* width: 65%; */
            width: 28px;
            height: 28px;
        }

        .icon-text-3 {
            font-size: 12px;
            padding: 2px;
        }

        #announce {
            padding: 10px 10px;
        }

        .announce-text {
            font-size: 12px;
        }

        .icon-text-2 {
            font-size: 12px;
            padding: 8px;
        }

        avatar {}

        .grid-cell {
            height: 64px;
            /* background-color: aquamarine; */
            padding: 10px;
            text-align: center;
            font-size: 12px;
        }

        .icon-text-4 {
            padding: 8px 0 8px 0;
            font-size: 18px;
        }

        .right-border{
            border-width: 0 1px 0 0;
            border-color: rgba(0, 0, 0, .1);
            border-style:solid;
        }

        
    </style>
</head>

<body>
    <div id="contain">
        <div id="contain-head">
            <div class="my-row">
                <div id="avatar" class="my-cell u-1of5" style="text-align:right;">
                    <img src="{$my['avatar']}" class="img-circle" style="width: 45px;height: 45px;border:2px solid white;">
                    <!-- <img src="./assets/others/yes.jpg" class="avatar" style="width: 75%;"> -->
                </div>
                <div id="person-info" class="my-cell u-35of100" style="font-size: 12px;">
                    <div style="margin: 0 1rem;">
                        <h4 id="" style="color:white;margin: 0;">{$my['nickname']}</h3>
                    </div>

                    <div style="color:#faff83;margin: 1rem 1rem;">
                        <!-- <i class="fa fa-fire" aria-hidden="true"></i> -->
                        <img src="__HOME__/images/user_center/touxian.png" style="width: 14px;height: 18px;vertical-align: text-bottom;" />

                        <switch name="grade">
                            <case value="0">VIP</case>
                            <case value="1">总代理</case>
                            <case value="2">全国总监</case>
                            <case value="3">官方合作伙伴</case>
                            <default />VIP
                        </switch>
                    </div>
                    <!-- <p style="color:white;margin: 1rem 1rem;">关注0 | 粉丝0</p> -->
                </div>

            </div>
        </div>
        <div id="contain-body">
            <div id="body-items">

                <div class="body-item">
                    <div id="head-icons">
                        <div class="my-cell u-1of4">
                            <div class="my-icon">
                                <img src="__HOME__/images/team/shouyi.png" class="my-icon-4">
                                <div class="icon-text-1">收益管理</div>
                            </div>
                        </div>
                        <div class="my-cell u-1of4">
                            <a href="{:U('user.order/index',['type' => 'all'])}">
                                <div class="my-icon">
                                    <img src="__HOME__/images/team/tuandui.png" class="my-icon-4">
                                    <div class="icon-text-1">团队管理</div>
                                </div>
                            </a>
                        </div>
                        <div class="my-cell u-1of4">
                            <a href="{:U('team.team/index',['type' => 'all'])}">
                                <div class="my-icon">
                                    <img src="__HOME__/images/team/dingdan.png" class="my-icon-4">
                                    <div class="icon-text-1">我的订单</div>
                                </div>
                            </a>
                        </div>
                        <div class="my-cell u-1of4">
                            <a href="{:U('Goods/index')}">
                                <div class="my-icon">
                                    <img src="__HOME__/images/team/tuiguang.png" class="my-icon-4">
                                    <div class="icon-text-1">推广赚钱</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="body-item" style="display: flex">
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">
                            全国总监
                            <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">团队代理
                            <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">团队粉丝
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                </div>

                <div class="body-item" style="display: flex">
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">直属会员
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">直属下级
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of3">
                        <div class="grid-cell">直属粉丝
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                </div>

                <div class="body-item" style="display: flex">
                    <div class="my-cell u-1of4">
                        <div class="grid-cell right-border">今日收入
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of4">
                        <div class="grid-cell right-border">今日订单
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of4">
                        <div class="grid-cell right-border">昨日收入
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                    <div class="my-cell u-1of4">
                        <div class="grid-cell">昨日订单
                             <div class="icon-text-4">100</div>
                        </div>
                    </div>
                </div>

            </div>



            <!-- <div id="pin-footer">固定底端</div> -->

        </div>


    </div>
</body>

</html>